// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'vue2-animate/dist/vue2-animate.min.css'
import store from '@/store'
import tools from '@/config/tools'
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(tools)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  render: h => h(App),
  template: '<App ref="app"/>'
})

function drag (k) {
  const label = document.createElement('div')
  const i = document.createElement('i')
  const span = document.createElement('span')
  // const edit = document.getElementById('editctn').parentNode
  const edit = document.getElementsByClassName('editctn')[k].parentNode
  const editLeft = edit.offsetLeft
  const editRight = editLeft + edit.offsetWidth
  Vue.nextTick(() => {
    label.id = 'els-it-copy'
    label.className = 'els-it'
    label.appendChild(i)
    label.appendChild(span)
    label.style.position = 'fixed'
    label.style.left = 0
    label.style.top = 0
    label.style.display = 'flex'
    label.style.alignItems = 'center'
    label.style.justifyContent = 'center'
  })
  Vue.directive('labeldrag', {
    bind (el, def, vnode) {
      let isCreate = false
      el.onmousedown = e => {
        e.stopPropagation()
        e.preventDefault()
        label.style.width = el.offsetWidth + 'px'
        label.style.height = el.offsetHeight + 'px'
        label.style.fontSize = getComputedStyle(el).fontSize
        if (!i.className) {
          i.className = el.children[0].className
        }
        if (!span.text) {
          span.innerHTML = el.children[1].innerHTML
        }
        let left = el.offsetLeft + 'px'
        let top = el.offsetTop + 'px'
        label.style.left = left
        label.style.top = top
        label.style.boxSizing = 'border-box'
        label.style.border = '1px dashed #77bdff'
        label.style.color = '#0db3a6'
        label.style.backgroundColor = 'rgb(215, 215, 215)'
        label.style.cursor = 'pointer'
        label.style.opacity = 0.6
        isCreate = true
        document.onmousemove = e => {
          e.preventDefault()
          e.stopPropagation()
          if (isCreate) {
            if (!document.getElementById('els-it-copy')) document.body.appendChild(label)
            Vue.nextTick(() => {
              label.style.left = e.x - el.offsetWidth / 2 + 'px'
              label.style.top = e.y - el.offsetHeight / 2 + 'px'
            })
          }
          return false
        }
        document.onmouseup = async e => {
          e.preventDefault()
          e.stopPropagation()
          if (isCreate) {
            document.onmousemove = null
            let left = Number.parseInt(label.style.left)
            let right = left + label.offsetWidth
            if (left >= editLeft && right <= editRight) {
              const {
                allocate
              } = await
              import('@/config/ele.config')
              vnode.context.vNodes.push(allocate(def.value))
              vnode.context.index = vnode.context.vNodes.length - 1
            }
            if (document.getElementById('els-it-copy')) {
              Vue.nextTick(() => {
                i.className = ''
                span.innerHTML = ''
                document.body.removeChild(label)
              })
            }
            isCreate = false
          }
          vnode.context.$forceUpdate()
          return false
        }
      }
    }
  })
}
Vue.prototype.$drag = drag
// Vue.directive('updrag', {
//   bind (el, def, vnode) {
//     let isUpdrag = false
//     let indextop = ''
//     el.onmousedown = e => {
//       e.stopPropagation()
//       e.preventDefault()
//       indextop = Number.parseInt(el.style.top)
//       let rect = el.parentNode.getBoundingClientRect()
//       let ptop = rect.top
//       let pbottom = rect.bottom
//       let elRect = []
//       let comboxes = document.getElementsByClassName('combox')
//       let dis = 0
//       let moveclose = 0
//       for (let el of comboxes) {
//         elRect.push(el.getBoundingClientRect().top - ptop + el.getBoundingClientRect().height / 2)
//       }
//       document.onmousemove = e => {
//         e.preventDefault()
//         e.stopPropagation()
//         isUpdrag = true
//         if (isUpdrag) {
//           el.style.zIndex = 10
//           el.style.backgroundColor = 'rgba(110,214,224,0.5)'
//           if (e.y >= ptop && e.y <= pbottom && (Math.abs(e.y - indextop) > 6)) {
//             el.style.top = e.y + 'px'
//             for (let [k, mid] of elRect.entries()) {
//               let temp = Math.abs(e.y - mid)
//               if (k === 0) {
//                 dis = temp
//               } else {
//                 if (temp < dis) {
//                   dis = temp
//                   moveclose = k
//                 }
//               }
//             }
//           } else {
//             el.style.top = indextop + 'px'
//             isUpdrag = false
//           }
//         }
//         return false
//       }
//       document.onmouseup = e => {
//         e.preventDefault()
//         e.stopPropagation()
//         document.onmousemove = null
//         el.style.zIndex = 1
//         el.style.backgroundColor = '#fff'
//         el.style.top = indextop + 'px'
//         if (isUpdrag) {
//           let beforcg = vnode.context.vNodes[def.value]
//           vnode.context.vNodes.splice(def.value, 1)
//           vnode.context.vNodes.splice(moveclose, 0, beforcg)
//           vnode.context.$forceUpdate()
//         }
//         isUpdrag = false
//         return false
//       }
//     }
//   }
// })
